
$experimental-support-for-mozilla: false;
$experimental-support-for-opera: false;
$experimental-support-for-microsoft: false;
$supported-browsers: android ios-safari;
$browser-minimum-versions: ("android": "4", "ios-safari": "7");

@mixin center($width: null, $height: null) {
    position: absolute;
    top: 50%;
    left: 50%;

    @if not $width and not $height {
        @include transform(translate(-50%, -50%));
    } @else if $width and $height {
        width: $width;
        height: $height;
        margin: (0 - $width / 2) 0 0 (0 - $height / 2);
    } @else if not $height {
        width: $width;
        margin-left: -($width / 2);

        @include translateY(-50%);
    } @else {
        height: $height;
        margin-top: -($height / 2);

        @include translateX(-50%);
    }
}

$uiWidth: 640px !default;

@function pxToRem($px) {
    @return $px * 10 / $uiWidth * 1rem;
}
@function p2r($n) {
    @return $n * 10px / $uiWidth * 1rem;
}
@function px2Rem($px) {
    @return $px * 10 / $uiWidth * 1rem;
}

@mixin elps {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@mixin setBg($url) {
    background-image: url($url);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

@mixin boxflex {
    //   @include display-box;
    @include display-flex;

    display: -webkit-flex;
}

@mixin flex-center-vt {
    // @include box-align(center);
    @include align-items(center);
}

@mixin flex-space-between {
    @include justify-content(space-between);
}

@mixin flex-center-hr {
    // @include box-pack("justify");
    @include justify-content(center);
}

@mixin flex-center {
    @include flex-center-vt;

    @include flex-center-hr;
}

@mixin flex-num($num: 1) {
    @include box-flex($num);

    @include flex($num);
}

//绝对定位-居中
@mixin position-center {
    position: absolute;
    left: 50%;
    top: 50%;

    @include transform(translate3d(-50%, -50%, 0));
}

//子元素垂直居中
@mixin after-verticle-middle {
    &::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
}

@mixin clearfix {
    &:after {
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
}

// 元素水平居中
@mixin landscape-middle {
    position: absolute;
    left: 50%;
    @include transform(translate3d(-50%, 0, 0));
}

// 设置background适配的背景图
@mixin bgImg ($width, $height, $path) {
    width: p2r($width);
    height: p2r($height);
    background: url('#{$path}') center center / cover no-repeat;
}